<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Surfingkeys Settings</title>
        <link rel="stylesheet" href="../content_scripts/content_scripts.css">
        <link rel="stylesheet" href="options.css">
        <script src="../libs/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script id="sample" type="text/template">// an example to create a new mapping `ctrl-y`
mapkey('<Ctrl-y>', 'Show me the money', function() {
    Front.showPopup('a well-known phrase uttered by characters in the 1996 film Jerry Maguire (Escape to close).');
});

// an example to replace `T` with `gt`, click `Default mappings` to see how `T` works.
map('gt', 'T');

// an example to remove mapkey `Ctrl-i`
unmap('<Ctrl-i>');

// set theme
settings.theme = `
.sk_theme {
    font-family: Input Sans Condensed, Charcoal, sans-serif;
    font-size: 10pt;
    background: #24272e;
    color: #abb2bf;
}
.sk_theme tbody {
    color: #fff;
}
.sk_theme input {
    color: #d0d0d0;
}
.sk_theme .url {
    color: #61afef;
}
.sk_theme .annotation {
    color: #56b6c2;
}
.sk_theme .omnibar_highlight {
    color: #528bff;
}
.sk_theme .omnibar_timestamp {
    color: #e5c07b;
}
.sk_theme .omnibar_visitcount {
    color: #98c379;
}
.sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) {
    background: #303030;
}
.sk_theme #sk_omnibarSearchResult>ul>li.focused {
    background: #3e4452;
}
#sk_status, #sk_find {
    font-size: 20pt;
}`;
// click `Save` button to make above settings to take effect.</script>
        <script id="templateProxyPair" type="text/template">
            <div class="proxyPair">
                <div class="deleteProxyPair">🗑️</div>
                <div class="proxy">
                    Proxy:
                    <input type="text" value="" placeholder="192.168.1.100:8080" size=72>
                    Proxy Type:
                    <select value="PROXY">
                        <option value="PROXY" selected="selected">PROXY</option>
                        <option value="SOCKS5">SOCKS5</option>
                        <option value="HTTP">HTTP</option>
                        <option value="HTTPS">HTTPS</option>
                        <option value="SOCKS4">SOCKS4</option>
                        <option value="SOCKS">SOCKS</option>
                    </select>
                </div>
                <div class="autoproxy_hosts">
                    <h3>For below hosts, above proxy will be used, click ❌ to remove one.</h3>
                    <input type="text" value="" placeholder="google.*, youtube.com" size=72> <button>Add New</button>
                    <div></div>
                </div>
            </div>
        </script>
        <div id="keyPicker" style="display: none;">
            <h3>Pick up a new key, <kbd>Backsapce</kbd> to del backward, <kbd>Enter</kbd> to confirm, <kbd>Esc</kbd> to cancel.</h3>
            <div class='pressedKey'><kbd id="inputKey">&nbsp;</kbd></div>
        </div>
        <h3>Key mappings</h3>
        <input id="advancedToggler" type="checkbox" /> Advanced mode
        <span class="tip">If you're an advanced user, turn on it here.</span>
        <div class="section" id="basicMappings">
        </div>

        <div id="advancedSetting" class="section" style="display: none;">
            <label for="localPath">Load settings from:</label>
            <input type="text" value="" id="localPath" name="localPath" size=72>
            <span class=infoPointer for=localPathHelp>?</span>
            <div class=info id='localPathHelp' style="display: none;">You can load settings from URLs in scheme http/https, for example, <a href="https://gist.githubusercontent.com/brookhong/755982e0014004207849f6e357af56f3/raw/777f62deb54098d82070e1e05dc86f9a798a29a1/gistfile1.txt">https://gist.githubusercontent.com/brookhong/755982e0014004207849f6e357af56f3/raw/777f62deb54098d82070e1e05dc86f9a798a29a1/gistfile1.txt</a>. If you want to load settings from local file, please check <b>Allow access to file URLs</b> in <a href="chrome://extensions/">chrome://extensions/</a> for this extension, and specify the full path of your settings file, for example, /home/brook/.surfingkeys.js. Unfortunately there is no API support to read local file for Firefox, so you could not load settings from local file in Firefox.</div>
            <div id="save_container">
                <a href="#" id='showDefaultSettings'>Default mappings</a>
                <a href="https://github.com/brookhong/Surfingkeys/issues" target="_blank">Report issues</a>
                <a href="https://github.com/brookhong/Surfingkeys#edit-your-own-settings" target="_blank">How to add my own settings?</a>
                <input id="save_button" value="Save" type="button">
            </div>
            <div style="width: 100%;height: 1px;display: inline-block;"></div>
            <div id='mappings_container'>
                <div id="defaultMappings"></div>
                <div id="mappings" style="width: 100%"></div>
            </div>
        </div>

        <div class="section">
            <h3>Proxy Settings</h3>
            <div id="proxyMode">
                Mode:
                <select>
                    <option>always</option>
                    <option>byhost</option>
                    <option>bypass</option>
                    <option>clear</option>
                    <option>direct</option>
                    <option>system</option>
                </select>
                <span class="tip">
                    <span mode="always" style="display: none;">Connect to all sites through proxy.</span>
                    <span mode="byhost" style="display: none;">Connect to only specified sites through related proxy.</span>
                    <span mode="bypass" style="display: none;">Connect to all sites through proxy, with specified hosts excluded.</span>
                    <span mode="clear" style="display: none;">Surfingkeys will not take control of proxy settings, this is the default mode.</span>
                    <span mode="direct" style="display: none;">Connect to all sites directly.</span>
                    <span mode="system" style="display: none;">Use proxy configuration taken from the operating system.</span>
                </span>
            </div>
            <button id="addProxyPair">Add proxy pair</button>
        </div>
        <h3 id="resetSettings">Reset</h3>
        <iframe id="sandbox" allowtransparency="true" frameborder="0" scrolling="no" style="height: 0" src="/pages/sandbox.html"></iframe>
        <script src="../content_scripts/modules.min.js"></script>
        <script src="../content_scripts/front.js"></script>
        <script src="default.js"></script>
        <script src="../content_scripts/content_scripts.js"></script>
        <script src="options.js"></script>
        <script src="ga.js"></script>
        <script async src='https://www.google-analytics.com/analytics.js'></script>
    </body>
</html>
